<template>

    <div class="chartName">
        <div class="tiao"></div>
        <div>{{ title }}</div>
    </div>
    <div class="main" ref="chart1" style="width: 400px; height: 300px"></div>
  </template>
     
     
    <script setup>
  // 先引入echarts
  import * as echarts from "echarts";
  // vue3 引入对应功能
  import { onMounted, ref } from "vue";
  
  defineProps({
    title: {
    type: String,
  },
  });
  // 声明chart1，使用ref赋值null
  const chart1 = ref(null);
  
  // 声明echarts函数
  const chart = () => {
    // 解决echarts在vue中切换到其他页面再返回来就不显示的问题
    chart1.value.setAttribute("_echarts_instance_", "");
    // 这里使用chart1.value的形式获取到dom节点
    let myChart = echarts.init(chart1.value);
  
    // 绘制图表
    myChart.setOption({
    series: [
      {
        type: "pie",
        data: [
          
          {
            value: 1548,
            name: "C",
          },
        ],
        radius: ["50%", "70%"],
      },
    ],
  });
    // echarts 自适应，如果dom元素是自适应高宽，会随之改变echarts大小
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  };
  // 数据渲染完成后在这里挂载
  onMounted(() => {
    chart();
  });
  
  
  </script>
     
    <style scoped>
    .chartName {
      font-size: 20px;
      color: #1b1b1b;
      display: flex;
      margin-top: 20px;
      margin-left: 30px;
      margin-right: 10px;
      padding-bottom: 10px;
    }
    .main {
      margin: auto;
    }
    .tiao{
        width: 4px;
        height: 20px;
        margin-right: 9px;
        background-color: #945635;
        margin-top: 5px;
      }
  </style>